<template>

  <div id="id_home" class="wrapper">

    <!-- nav-bar  start-->
    <nav-bar class="nav-bar">
      <div slot="center">购物街</div>
    </nav-bar>
    <!-- nav-bar  end-->

    <!-- scroll  start-->
    <scroll class="content"
            ref="scroll"
            :probe-type="3"
            :pull-up-load="true"
            @scroll="contentScroll"
            @pullingUp="loadMore"
    >


      <!-- swiper  start-->
      <home-swiper class=home-swiper :banners="banners"></home-swiper>
      <!--    <my-swiper :banners="banners"></my-swiper>-->
      <!-- swiper  end-->

      <!--recommend start-->
      <recommend-view class="recommend-view" :recommends="recommends"></recommend-view>
      <!--recommend end-->


      <!--feature start-->
      <feature-view class="feature-view"></feature-view>
      <!--feature end-->

      <!--tab-control start-->
      <tab-control
        id="id_tab_control"
        class="tab-control"
        :titles="['流行','新款','精选']"
        @itemClick="tabItemClick"
      >
      </tab-control>
      <!--tab-control end-->

      <!--good-list start-->
      <good-list
        id="id_good_list"
        :goods="showGoods">
      </good-list>
      <!--good-list end-->

    </scroll>
    <!-- scroll  end-->

    <back-top @click.native="backClick" v-show="isShowBackTop"/>

  </div>
</template>

<script>

    //  TODO: 全局的的自定义公共组件
    import NavBar from "components/common/navbar/NavBar";
    import Scroll from "components/common/scroll/Scroll";

    //  TODO: 业务相关的自定义组件
    import TabControl from "components/content/tabControl/TabControl";
    import GoodList from "components/content/goods/GoodList";
    import BackTop from 'components/content/backTop/BackTop'

    // import MySwiper from "@/components/common/awesome-swiper/MySwiper";

    //  TODO: 子组件
    import HomeSwiper from "./childComps/HomeSwiper";
    import RecommendView from "./childComps/RecommendView";
    import FeatureView from "./childComps/FeatureView";

    //  TODO: 方法，函数
    import {
        getHomeMultidata,
        getHomeGoods,
    } from "network/home";

    import {debounce} from "common/utils";

    // TODO: 导出组件
    export default {
        name: "Home",
        components: {
            NavBar,
            HomeSwiper,
            RecommendView,
            FeatureView,
            TabControl,
            GoodList,
            Scroll,
            BackTop
        },
        data() {
            return {
                flag: true,
                result: null,
                banners: [],
                recommends: [],
                goodsMap: {
                    'pop': {page: 0, list: []},
                    'new': {page: 0, list: []},
                    'sell': {page: 0, list: []}
                },
                currentType: 'pop',
                isTabFixed: false,
                tabOffsetTop: 0,
                isShowBackTop: false,
                saveY: 0
            }
        },

        // TODO: 定义函数方法 methods
        methods: {
            /**
             * 事件监听方法
             */
            logPath() {
                alert(this.$route.path);
            },

            /**
             * 事件监听方法
             */
            // TODO: tabItem点击时，请求数据，并更新data中对应的变量
            tabItemClick(index) {
                console.log("在与子组件的emit通信中获取了点击事件，index为" + index);
                switch (index) {
                    case 0:
                        this.currentType = 'pop';
                        break;
                    case 1:
                        this.currentType = 'new';
                        break;
                    case 2:
                        this.currentType = 'sell';
                }
                console.log("来自home组件的tabItemClick()方法：当前展示的列表为" + this.currentType);
            },

            // TODO: 返回顶部
            backClick() {
                this.$refs.scroll.scrollTo(0, 0);
                console.log("点击了返回顶部按钮，返回顶部中");
            },

            // TODO:检测下拉距离是否超过1000
            contentScroll(position) {
                // console.log("检测下拉距离中............");
                this.isShowBackTop = (-position.y) > 1000
            },

            // 请求更多数据
            loadMore() {
                console.log("loadMore()正在请求新一批数据中");
                this.getGoods(this.currentType)
            },

            /**
             * 网络请求相关方法
             */

            // TODO:获取轮播图
            getMultiData() {
                this.result = getHomeMultidata().then(
                    res => {
                        console.log("请求到了轮播图数据如下");
                        console.log(res);
                        console.log(typeof res);

                        console.log(this.banners);
                        console.log(typeof this.banners);

                        this.banners = res.data["banner"]["list"];
                        this.recommends = res.data["recommend"]["list"];

                        // 下次更新DOM时,获取新的tabOffsetTop值(不保险,可以在updated钩子中获取)
                        // this.$nextTick(() => {
                        //     this.tabOffsetTop = this.$refs.tabControl.$el.offsetTop
                        // })
                    }
                );
            },

            // TODO:获取首页商品信息
            getGoods(good_type = 'pop', page = 1) {
                const current_page = this.goodsMap[good_type].page + 1;

                this.result = getHomeGoods(good_type, current_page).then(
                    res => {
                        // 将从接口拿到的商品列表传入该list中
                        this.goodsMap[good_type].list.push(...res.data.list);

                        // 测试语句
                        console.log("请求到了首页展示的数据如下, 商品类别为" + good_type);
                        console.log(res);
                        console.log(typeof res);
                        console.log("更新了商品列表信息");
                        console.log(this.goodsMap)
                        // 下次更新DOM时,获取新的tabOffsetTop值(不保险,可以在updated钩子中获取)
                        // this.$nextTick(() => {
                        //     this.tabOffsetTop = this.$refs.tabControl.$el.offsetTop
                        // })
                    }
                );
            }
        },

        // TODO: 设置计算属性
        computed: {
            showGoods() {
                console.log("来自Home组件的计算属性的showGoods");
                console.log(this.goodsMap[this.currentType]);
                return this.goodsMap[this.currentType].list;
            }
        },

        // TODO: 定义生命周期函数
        created() {
            console.log("home组件的create方法");
            this.getMultiData();
            this.getGoods('pop');
            this.getGoods('sell');
            this.getGoods('new');
        },

        // TODO: 更新时
        updated() {
            console.log("HOME组件的updated()函数被触发！")
        },

        // TODO: 挂载时
        mounted() {
            // 1.图片加载完成的事件监听
            const refresh = debounce(this.$refs.scroll.refresh, 50);
            this.$bus.$on('itemImageLoad', () => {
                refresh()
            })
        },

        // TODO: 被销毁时
        destroyed() {
            console.log('home destroyed');
        },
        activated() {
            this.$refs.scroll.scrollTo(0, this.saveY, 0);
            this.$refs.scroll.refresh()
        },
        deactivated() {
            this.saveY = this.$refs.scroll.getScrollY();
        },
    }
</script>


<style scoped>
  #id_home {
    /*padding-top: 44px;*/
    height: 100vh;
    position: relative;
  }

  .nav-bar {
    background-color: var(--color-tint);
    color: #fff;

    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
  }

  .tab-control {
    position: sticky;
    top: 44px;
    z-index: 9;
  }

  .content {
    overflow: hidden;

    position: absolute;
    top: 44px;
    bottom: 49px;
    left: 0;
    right: 0;
  }

  /*.content {*/
  /*height: calc(100% - 93px);*/
  /*overflow: hidden;*/
  /*margin-top: 44px;*/
  /*}*/
</style>


<!--<style scoped>-->
<!--  /*#id_home {*/-->
<!--  /*  padding-top: 44px;*/-->
<!--  /*}*/-->

<!--  /*.nav-bar {*/-->
<!--  /*  background-color: var(&#45;&#45;color-tint);*/-->
<!--  /*  position: fixed;*/-->
<!--  /*  left: 0;*/-->
<!--  /*  right: 0;*/-->
<!--  /*  top: 0;*/-->
<!--  /*  z-index: 10;*/-->
<!--  /*}*/-->
<!--  #id_home {-->
<!--    position: relative;-->
<!--    /*overflow: auto;*/-->
<!--    height: 100vh;-->
<!--  }-->

<!--  .nav-bar {-->
<!--    background-color: var(&#45;&#45;color-tint);-->
<!--    /*font-weight: 700;*/-->
<!--    color: #fff;-->
<!--    position: fixed;-->
<!--    left: 0;-->
<!--    right: 0;-->
<!--    top: 0;-->
<!--    z-index: 9;-->
<!--  }-->

<!--  #id_tab_control {-->
<!--    position: sticky;-->
<!--    width: 100%;-->
<!--    top: 45px;-->
<!--    z-index: 9;-->
<!--    /*left: 0;*/-->
<!--    /*right: 0;*/-->
<!--  }-->

<!--  .content {-->
<!--    overflow: hidden;-->
<!--    position: absolute;-->
<!--    top: 44px;-->
<!--    bottom: 49px;-->
<!--    left: 0;-->
<!--    right: 0;-->
<!--  }-->


<!--  .back-top {-->
<!--    position: fixed;-->
<!--    right: 10px;-->
<!--    bottom: 60px;-->
<!--  }-->

<!--  /*.content {*/-->
<!--  /*height: calc(100% - 93px);*/-->
<!--  /*overflow: hidden;*/-->
<!--  /*margin-top: 44px;*/-->
<!--  /*}*/-->
<!--</style>-->
